<template>
  <view class="login-page" :style="{ paddingTop: statusBarHeight + 10 + 'px' }">
    <view :style="{ paddingTop: capsuleHeight + 'px' }">
      <view class="login-form">
        <view class="login">
          <text class="login-txt"> Welcome back </text>
          <wd-form ref="formRef" :model="formData" :rules="rules">
            <view>
              <wd-input
                prop="username"
                type="text"
                v-model="formData.username"
                prefixIcon="chat"
                :no-border="true"
                placeholder="请输入邮箱"
              />
            </view>
            <view class="mt">
              <wd-input
                prop="password"
                :no-border="true"
                prefixIcon="lock-on"
                v-model="formData.password"
                placeholder="请输入密码"
              />
            </view>
          </wd-form>
          <wd-button size="small" @tap="login"> LOGIN </wd-button>
          <view class="forgot"> 忘记密码？ </view>
        </view>
        <view class="login-type">
          <image src="@/static/icons/wx.png" mode="scaleToFill" class="wx" />
          <text> 微信一键登录 </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { validEmail, validPassword } from "@/utils/validate.js";
const { statusBarHeight } = uni.getSystemInfoSync();

const formRef = ref();
const formData = ref({
  username: "123@qq.com",
  password: "ad123456",
});
const capsuleHeight = computed(() => {
  let h = 0;
  // #ifdef MP-WEIXIN
  const { height } = uni.getMenuButtonBoundingClientRect();
  h = height;
  // #endif
  return h;
});
const login = () => {
  formRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      uni.switchTab({ url: "/pages/index/index" });
    }
  });
};

const rules = {
  username: validEmail,
  password: validPassword,
};
</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100vh;
  padding: 20rpx 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://tse1-mm.cn.bing.net/th/id/OIP-C.f2aL2_11y3f-aJtTUJFECgHaOz?w=175&h=349&c=7&r=0&o=7&pid=1.7&rm=3")
    no-repeat center center;
  background-size: 100% 100%;
  box-sizing: border-box;
  .login-form {
    width: 600rpx;
    .login {
      width: 100%;
      gap: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 20px 30px;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      .login-txt {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
      }
      :deep(.wd-input__icon) {
        background-color: #f5f5f5;
      }
      :deep(.wd-input__value) {
        width: 100%;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        padding: 0 10px;
        box-sizing: border-box;
      }
      :deep(.mt) {
        margin-top: 10px !important;
      }
      :deep(.wd-button) {
        width: 100% !important;
      }
      .forgot {
        font-size: 14px;
        color: #999;
        text-align: center;
      }
    }
    .login-type {
      gap: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-top: 80px;
      .wx {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
